<template>
  <div
    class="w100"
    :class="classList"
  >
    <span class="tip-icon-inner"></span>
    <el-select
      v-bind="{ ...item }"
      v-model="changeValue"
      popper-class="t-select-popper"
      filterable
      @change="handleChange"
    >
      <template
        v-for="option in getOptions()"
        :key="option.value"
      >
        <el-option
          v-if="isShowOption(`${props.item?.vModel}_${option.value}`)"
          :value="option.value"
          :label="option.label"
        />
      </template>
    </el-select>
  </div>
</template>

<script setup lang="ts" name="TSelect">
import { formItemProps } from "@/views/formgen/components/FormItem/hooks/useFormItemHook";
import { selectEmits, useSelect } from "./useSelect";

const props = defineProps({
  ...formItemProps
});

const emits = defineEmits(selectEmits);

const { changeValue, classList, handleChange, getOptions, isShowOption } = useSelect(props, emits);
</script>

<style scoped lang="scss">
@import "../../../assets/styles/exam";
</style>
